<template>
    <div class="circle-shape">
        <dv-border-box-3 :key="element.style.width"></dv-border-box-3>
    </div>
</template>

<script>
import OnEvent from '../common/OnEvent'

export default {
    extends: OnEvent,
    props: {
        propValue: {
            type: Object,
            required: true,
            default: () => { },
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            width: 0,
            height: 0,
            dynamicStyles: {
                width: '0px',
                height: '0px',
                borderRadius: '0px'
            }
        }
    },
    watch: {
        'element.style.width': function () {
            const { width, height } = this.element.style
            this.dynamicStyles.width = width + "px"
            this.dynamicStyles.height = height + 'px'
            console.log("11")
        },
        'element.style.height': function () {
            const { width, height } = this.element.style
            this.dynamicStyles.width = width + "px"
            this.dynamicStyles.height = height + 'px'
        },
    },
    mounted() {
        const { width, height } = this.element.style
        this.dynamicStyles.width = width + "px"
        this.dynamicStyles.height = height + 'px'
    }
}
</script>

<style lang="scss" scoped>
.circle-shape {
    width: 100%;
    height: 100%;
    overflow: auto;
}
</style>
